import { EditorEvents } from '@tiptap/core'
import { AiEditorOptions } from '../../core/AiEditor'
import { Icons } from './Icons'
import { ChatApp } from './ChatApp'
import { ImageApp } from './ImageApp'
import { OutlineApp } from './OutlineApp'
import { defineCustomElement } from '../../commons/defineCustomElement'
import { AppMessageActionMenu, AppResponseActionMenu, AppImageResponseActionMenu } from './AiAppAction'

defineCustomElement('aie-app-message-action', AppMessageActionMenu)
defineCustomElement('aie-app-response-action', AppResponseActionMenu)
defineCustomElement('aie-app-image-response-action', AppImageResponseActionMenu)

export function createAvatar(icon: string) {
  const avatarDiv = document.createElement('div')
  avatarDiv.style.fontSize = '30px'
  avatarDiv.style.marginLeft = '5px'
  avatarDiv.innerHTML = icon
  return avatarDiv
}

export interface AiEditorApp extends HTMLElement {
  onCreate: (event: EditorEvents['create'], options: AiEditorOptions) => void
  onTransaction: (event: EditorEvents['transaction']) => void
}

export interface ChatMessage {
  id: number
  role: string | null
  content: string | null
}

export class AiApp {
  icon: string
  text: string
  tab: HTMLDivElement
  div: HTMLElement
  display: boolean = false

  constructor(icon: string, text: string, div: HTMLElement) {
    this.icon = icon
    this.text = text

    const tab = document.createElement('div')
    tab.innerHTML = icon
    tab.style.background = 'none'
    tab.style.border = 'none'
    tab.style.cursor = 'pointer'
    tab.style.fontSize = '24px'
    tab.style.padding = '10px'
    tab.onmouseover = () => {
      tab.style.color = '#3498db'
    }
    tab.onmouseout = () => {
      tab.style.color = ''
    }
    this.tab = tab

    div.style.width = '100%'
    div.style.height = '100%'
    div.style.display = 'flex'
    div.style.flexDirection = 'column'

    this.div = div
  }
}

// export const defaultApps: AiApp[] = [
//   new AiApp(Icons.ChatBot, '', new ChatApp())
// ]

export function defaultApps() {
  return [
    new AiApp(Icons.OutlineApp, '', new OutlineApp()),
    new AiApp(Icons.ChatApp, '', new ChatApp()),
    new AiApp(Icons.ImageApp, '', new ImageApp()),
  ]
}